<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>web打印demo</title>
    <link
      href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css"
      rel="stylesheet"
    />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
    #app {
    }
    #content {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 200px;
      color: blue;
    }
    .set-page{
      {# page-break-before: always; #}
      {# page-break-after: always #}
    }
    @media print {
      body {
        {# background-color: red; #}
      }
    }
    @page {
      {# margin: 10px;
      size: A3 landscape; #}
    }
  </style>
  <body>
    <div id="app" v-loading="loading">
      <div v-html="diyHtml" id="content"></div>
      <el-button @click="print">全局打印</el-button>
      <el-button @click="onInnerHtmlPrint">局部打印（innerHtml）</el-button>
      <el-button @click="onIframePrint">局部打印(iframe)</el-button>
      <el-button @click="onCanvasPrint">局部打印(canvas)</el-button>
      <div>
        <img id="img-canvas" width="500" height="300" src="./鬼刀.png" />
      </div>
      <h1 class="set-page">分页测试001</h1>
      <h1>分页测试002</h1>
      <img src="./鬼刀.png"/>
    </div>
  </body>
  <script src="https://cdn.staticfile.org/html2canvas/0.4.0/html2canvas.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script>
  <script>
    window.onbeforeprint = function (event) {
      console.log("打印窗口调起");
    };
    window.onafterprint = function (event) {
      console.log("打印窗口关闭");
    };
    new Vue({
      el: "#app",
      data: function () {
        return {
          loading: false,
          test: "1111",
          diyHtml: "<h1>俊劫的打印分享</h1>",
          imgBase64: "",
        };
      },
      methods: {
        onInnerHtmlPrint() {
          // 缓存页面内容
          const bodyHtml = window.document.body.innerHTML;
          // 获取要打印的dom
          const printContentHtml = document.getElementById("content").innerHTML;
          // 替换页面内容
          window.document.body.innerHTML = printContentHtml;
          // 全局打印
          window.print();
          // 还原页面内容
          window.document.body.innerHTML = bodyHtml;
        },
        onIframePrint() {
          const printContentHtml = document.getElementById("content").innerHTML;
          const iframe = document.createElement("iframe");
          iframe.setAttribute(
            "style",
            "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
          );
          document.body.appendChild(iframe);
          iframe.contentDocument.write(printContentHtml);
          iframe.contentDocument.close();
          iframe.contentWindow.print();
          document.body.removeChild(iframe);
        },
        onCanvasPrint() {
          html2canvas(document.getElementById("content"), {
            onrendered: function (canvas) {
              imgBase64 = canvas.toDataURL("image/jpeg", 1.0);
              document.getElementById("img-canvas").src = imgBase64;
              setTimeout(() => {
                const iframe = document.createElement("iframe");
                iframe.setAttribute(
                  "style",
                  "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
                );
                document.body.appendChild(iframe);
                iframe.contentDocument.write(
                  `<img width="300" height="300" src=${imgBase64} />`
                );
                iframe.contentDocument.close();
                iframe.contentWindow.print();
                document.body.removeChild(iframe);
              }, 0);
            },
          });
        },
      },
      mounted() {},
    });
  </script>
</html>
